import { Square } from "../Square"
import { IViewer } from "../types"
import $ from "jquery"
import config from "./PageConfig"

export class SquarePageView implements IViewer {
    private dom?: JQuery<HTMLElement>
    private isRemove: boolean = false
    constructor(private square: Square, private container: JQuery<HTMLElement>) {}
    show() {
        if (this.isRemove) return
        if (!this.dom) {
            this.dom = $("<div>")
                .css({
                    position: "absolute",
                    width: config.width,
                    height: config.height,
                    backgroundColor: this.square.color,
                    border: `1px solid ${config.borderColor}`,
                    boxSizing: "border-box"
                })
                .appendTo(this.container)
        }
        // 因为要重新渲染逻辑坐标为page实际坐标
        this.dom.css({
            left: this.square.point.x * config.width,
            top: this.square.point.y * config.height
        })
    }
    remove() {
        if (this.dom) {
            this.dom.remove()
            this.isRemove = true
        }
    }
}
